<template>
  <div>
    <a-row type="flex">
      <a-col :span="20">
        <a-select mode="multiple" placeholder="请选择槽号" :value="selectedSlotIds" @change="handleChange" style="min-width:200px;max-height:62px; overflow-y: auto;">
          <a-select-option v-for="item in slotIdList" :key="item" :value="item">
            {{ item }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="4"> <j-select-data-slot  @change="handleChange2"></j-select-data-slot>  </a-col>
    </a-row>
  </div>
</template>
<script>
const OPTIONS = ['Apples', 'Nails', 'Bananas', 'Helicopters']
import JSelectDataSlot from './JSelectDataSlot1'
import { getAction } from '@/api/manage'

export default {
  components: { JSelectDataSlot },
  data() {
    return {
      selectedSlotIds: [],
      dataSoltIds: [],
      dataSource: [],
      slotIdList: [], 
    }
  },
  created() {
    this.loadData()
  },
  computed: {
   
  },
  mounted() {
    this.selectedSlotIds = this.value
  },
  watch: {
    value(val) {
      this.selectedSlotIds = val
    },
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  methods: {
    handleChange2(v){ 
       this.handleChange(v)
    },
    handleChange(selectedItems) {
      this.selectedSlotIds = selectedItems
      this.$emit("change", this.selectedSlotIds)
    },
    async loadData() {
      this.loading = true
      getAction('/dataSlot/dataSlot/list', { pageSize: 9999 })
        .then((res) => {
          if (res.success) {
            this.dataSource = res.result.records
            for (let i = 0; i < this.dataSource.length; i++) {
              this.slotIdList.push(this.dataSource[i].slotId)
            }
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>